<template>
  <div class="w-full h-full">
    <template v-if="useDataDashboardThemeStore.dataDashboardType !== 3">
      <div
        class="relative h-full w-full"
        v-if="activemenu?.menuType !== 2 && activemenu?.menuType !== 4"
      >
        <div
          class="absolute left-[10px] z-[2] h-full f-full pt-[80px] pb-[24px]"
          :class="isshowlefts ? 'anmete' : 'anmetes'"
        >
          <div ref="leftRef" class="w-full h-full">
            <div class="bgImgs w-full h-full min-w-[456px]">
              <leftscreen
                class="w-[456px] bgImg pr-[16px] pl-[24px] z-[2]"
                :activemenu="activemenu"
              />
            </div>
            <div
              class="absolute top-[calc(50%-60px)] text-[#fff] right-[-34px] h-[128px] w-[36px] cursor-pointer"
              @click="changeleft"
            >
              <img
                v-if="isshowlefts"
                class="w-[36px] h-[128px]"
                :src="getDataImg('showLeft')"
              />
              <img
                v-else
                class="w-[36px] h-[128px]"
                :src="getDataImg('showLeft1')"
              />
            </div>
          </div>
        </div>
        <div
          ref="rightRef"
          class="absolute right-[10px] z-[2] h-full pt-[80px] pb-[24px]"
          :class="isshowrihgts ? 'anmeter' : 'anmeters'"
        >
          <template
            v-if="
              useDataDashboardThemeStore.dataDashboardIsHidden == 1 ||
              useDataDashboardThemeStore.dataDashboardType !== 2
            "
          >
            <div class="bgImg-rights w-full h-full min-w-[456px] relative">
              <rightscreen
                class="w-[456px] h-full bgImg-right pr-[24px] pl-[16px] z-[2]"
                :activemenu="activemenu"
              />
              <div
                v-if="useDataDashboardThemeStore.dataDashboardButtonId < 3"
                class="absolute left-[-150px] bottom-[100px]"
              >
                <verviewalarm
                  class="z-[2]"
                  v-if="
                    (useDataDashboardThemeStore.dataDashboardType == 2 &&
                      useDataDashboardThemeStore.dataDashboardIsHidden == 1 &&
                      activemenu?.id == 7) ||
                    activemenu?.menuTypemap == 1
                  "
                />
              </div>
              <div class="absolute left-[-115px] bottom-[60px]">
                <mapbgset class="z-[5]" v-if="ishowmapbgset()" />
              </div>
            </div>
            <div
              class="absolute top-[calc(50%-36px)] text-[#fff] left-[-35px] w-[36px] h-[128px] cursor-pointer"
              @click="changeright"
            >
              <img
                v-if="isshowrihgts"
                class="w-[36px] h-[128px] object-cover"
                :src="getDataImg('showRight')"
              />
              <img
                v-else
                class="w-[36px] h-[128px]"
                :src="getDataImg('showRight1')"
              />
            </div>
          </template>
          <div
            class="w-full z-[10] h-full"
            v-if="
              useDataDashboardThemeStore.dataDashboardIsHidden == 2 &&
              useDataDashboardThemeStore.dataDashboardType == 2
            "
          >
            <floorcheck :setshowright="setshowright" />
          </div>
        </div>
        <minuscrreen
          class="z-[1]"
          :activemenu="activemenu"
          :menuList="customMenuList"
          :checkmenu="checkmenu"
        />
        <contentbg class="z-[1]" />
        <footerbuttom :btnlist="activemenu?.btnlist" class="z-[1]" />
      </div>
      <div class="relative w-full h-full" v-if="activemenu?.menuType == 2">
        <iframe
          v-if="activemenu?.url?.startsWith('http')"
          :src="activemenu?.url"
          width="100%"
          height="100%"
          frameborder="0"
        ></iframe>
        <div
          v-else
          class="w-full h-[1080px] text-[#fff] flex justify-center items-center"
        >
          无法加载链接
        </div>
        <minuscrreen
          class="z-[1]"
          :activemenu="activemenu"
          :menuList="customMenuList"
          :checkmenu="checkmenu"
        />
      </div>
      <div class="relative w-full h-full" v-if="activemenu?.menuType == 4">
        <configuration :id="activemenu?.topid" />
        <minuscrreen
          class="z-[1]"
          :activemenu="activemenu"
          :menuList="customMenuList"
          :checkmenu="checkmenu"
        />
      </div>
      <!-- <div v-if="useDataDashboardThemeStore.dataDashboardButtonId < 3">
        <verviewalarm class="z-[2]"
          v-if="useDataDashboardThemeStore.dataDashboardType == 2 && useDataDashboardThemeStore.dataDashboardIsHidden == 1 && activemenu?.id == 7 || activemenu?.menuTypemap == 1" />
      </div> -->

      <prejectSelecttwo
        class="z-[2]"
        v-if="
          useDataDashboardThemeStore.dataDashboardType == 2 &&
          useDataDashboardThemeStore.GET_SETTING('systemShow') == 2
        "
      />
      <prejectSelect
        class="z-[2]"
        v-if="
          useDataDashboardThemeStore.dataDashboardType == 1 &&
          useDataDashboardThemeStore.GET_SETTING('systemShow') == 1
        "
      />
    </template>
    <template v-else>
      <div class="relative h-full w-full">
        <div
          class="absolute left-[10px] z-[2] h-full f-full pt-[80px] pb-[24px]"
          :class="isshowlefts ? 'anmete' : 'anmetes'"
        >
          <div ref="leftRef" class="w-full h-full">
            <div class="bgImgs w-full h-full min-w-[456px]">
              <leftscreen
                class="w-[456px] bgImg pr-[16px] pl-[24px] z-[2]"
                :activemenu="superviseEnum"
              />
            </div>
            <div
              class="absolute top-[calc(50%-64px)] text-[#fff] right-[-36px] h-[128px] w-[36px] cursor-pointer"
              @click="changeleft"
            >
              <img
                v-if="isshowlefts"
                class="w-[36px] h-[128px]"
                :src="getDataImg('showLeft')"
              />
              <img
                v-else
                class="w-[36px] h-[128px]"
                :src="getDataImg('showLeft1')"
              />
            </div>
          </div>
        </div>
        <div
          ref="rightRef"
          class="absolute right-[10px] z-[2] h-full pt-[80px] pb-[24px]"
          :class="isshowrihgts ? 'anmeter' : 'anmeters'"
        >
          <template
            v-if="useDataDashboardThemeStore.dataDashboardIsHidden == 1"
          >
            <div class="bgImg-rights w-full h-full min-w-[456px] relative">
              <rightscreen
                class="w-[456px] h-full bgImg-right pr-[24px] pl-[16px] z-[2]"
                :activemenu="superviseEnum"
              />
              <div class="absolute left-[-115px] bottom-[60px]">
                <mapbgset class="z-[5]" v-if="ishowmapbgset()" />
              </div>
            </div>
            <div
              class="absolute top-[calc(50%-36px)] text-[#fff] left-[-36px] w-[36px] h-[128px] cursor-pointer"
              @click="changeright"
            >
              <img
                v-if="isshowrihgts"
                class="w-[36px] h-[128px] object-cover"
                :src="getDataImg('showRight')"
              />
              <img
                v-else
                class="w-[36px] h-[128px]"
                :src="getDataImg('showRight1')"
              />
            </div>
          </template>
          <div
            class="w-full z-[10] h-full"
            v-if="useDataDashboardThemeStore.dataDashboardIsHidden == 2"
          >
            <floorcheck :setshowright="setshowright" />
          </div>
        </div>
        <contentbg class="z-[1]" />
        <footerbuttom :btnlist="superviseEnum?.btnlist" class="z-[1]" />
      
      </div>
    </template>
  </div>
</template>

<script lang="ts" setup>
import { getDataImg } from "@/utils/data-themset";
import verviewalarm from "@/views/large-data-screen/layoutscrreen/verview-alarm/verview-alarm.vue";
import configuration from "@/views/large-data-screen/layoutscrreen/contentbg/components/configurationtwo.vue";
import mapbgset from "@/views/large-data-screen/layoutscrreen/contentbg/components/mapbgset.vue";
import prejectSelecttwo from "@/views/large-data-screen/layoutscrreen/minuscrreen/system-select-two/index.vue";
import prejectSelect from "@/views/large-data-screen/layoutscrreen/minuscrreen/system-select/index.vue";
import leftscreen from "@/views/large-data-screen/leftcontent/index.vue";
import rightscreen from "@/views/large-data-screen/rightcontent/index.vue";
import floorcheck from "@/views/large-data-screen/rightcontent/component/floorcheck.vue";
import minuscrreen from "@/views/large-data-screen/layoutscrreen/minuscrreen/index.vue";
import contentbg from "@/views/large-data-screen/layoutscrreen/contentbg/index.vue";
import footerbuttom from "../footerbuttom/index.vue";
import {
  unitysetting,
  projectsetting,
  systematic
} from "@/api/screen/screenmune";
import "animate.css";
import { MenuEnum } from "@/views/large-data-screen/menulist";
import { cloneDeep } from "@pureadmin/utils";
import {
  PLATFORM_Map,
  usePageVariablesStoreHook,
  initScreenUnit
} from "@/store/modules/pageVariables";
import { useDataDashboardThemeStoreHook } from "@/store/modules/data-dashboard-theme";
import { useMenus } from "../menus";
import { superviseEnum } from "@/views/large-data-screen/menulist";
import { useToggleAnimate } from "@/views/large-data-screen/useToggleAnimate";
import { DATA_DASHBOARD_THEME_Map } from "@/constant";
const { menuList, projectmenuList } = useMenus();
const useDataDashboardThemeStore = useDataDashboardThemeStoreHook();
const isshowrihgts = ref(true);
const isshowlefts = ref(true);
const keyvalues = ref(0);
const customMenuList = shallowRef([]);
const activemenu = ref({
  menuType: 1,
  url: "",
  menuTypemap: null,
  id: null,
  btnlist: []
});
const usePageVariablesStore = usePageVariablesStoreHook();
const channel = ref(null);
const rightRef = ref(); //右侧
const leftRef = ref(); //左侧

onBeforeMount(() => {
  channel.value = new BroadcastChannel("data-dashboard-them");
  channel.value.onmessage = function (event) {
    if (event.data.type == "change") {
      useDataDashboardThemeStore.CHANGE_SETTING({
        key: event.data.key,
        value: event.data.value
      });
    } else if (event.data.type == "changeProject") {
      let screen = cloneDeep(usePageVariablesStore.getScreen());
      screen.project = event.data.value;
      usePageVariablesStore.setScreen(screen);
    } else if (event.data.type == "get") {
      if (event.data.key == "getDataDashboardType") {
        console.log(
          useDataDashboardThemeStore.GET_SETTING("dataDashboardType")
        );

        channel.value.postMessage({
          key: "dataDashboardType",
          value: useDataDashboardThemeStore.GET_SETTING("dataDashboardType"),
          type: "getdataDashboardType"
        });
      }
    }
  };
});
onUnmounted(() => {
  channel.value.close();
});
const ishowmapbgset = () => {
  if (useDataDashboardThemeStore.dataDashboardType !== 2) {
    return true;
  } else if (
    useDataDashboardThemeStore.dataDashboardType == 2 &&
    useDataDashboardThemeStore.dataDashboardButtonId < 2 &&
    useDataDashboardThemeStore.dataDashboardIsHidden == 1
  ) {
    return true;
  } else {
    return false;
  }
};
const changeleft = () => {
  isshowlefts.value = !isshowlefts.value;
};
const changeright = () => {
  isshowrihgts.value = !isshowrihgts.value;
};
//设置菜单
const setmenu = (menus, type) => {
  menus.forEach((item, index) => {
    item.id = index + 8;
    if (item.menuType == 1) {
      item.btnlist = MenuEnum["application"].btnlist;
      item.componentleft = MenuEnum["application"].componentleft;
      item.componentright = MenuEnum["application"].componentright;
      item.menuTypemap = MenuEnum["application"].menuTypemap;
      item.systematicId = 1;
    } else if (item.menuType == 3) {
      if (item.url == 1) {
        item.btnlist = MenuEnum["alarmevents"].btnlist;
        item.componentleft = MenuEnum["alarmevents"].componentleft;
        item.componentright = MenuEnum["alarmevents"].componentright;
        item.menuTypemap = MenuEnum["alarmevents"].menuTypemap;
      } else if (item.url == 2) {
        item.btnlist = MenuEnum["facility"].btnlist;
        item.componentleft = MenuEnum["facility"].componentleft;
        item.componentright = MenuEnum["facility"].componentright;
        item.menuTypemap = MenuEnum["facility"].menuTypemap;
      } else if (item.url == 3) {
        item.btnlist = MenuEnum["workoder"].btnlist;
        item.componentleft = MenuEnum["workoder"].componentleft;
        item.componentright = MenuEnum["workoder"].componentright;
        item.menuTypemap = MenuEnum["workoder"].menuTypemap;
      }
    } else if (item.menuType == 4) {
      item.topid = item.url;
    }
  });
  if (type == 1) {
    menus.unshift(MenuEnum["application"]);
    menus.unshift(MenuEnum["indvidual"]);
    menus.unshift(MenuEnum["unit"]);
  } else {
    menus.unshift(MenuEnum["projecthome"]);
    menus.unshift(MenuEnum["unit"]);
  }
  customMenuList.value = menus;
  if (
    useDataDashboardThemeStore.GET_SETTING("dataDashboardMenuId") &&
    type == 1
  ) {
    let arr = cloneDeep(customMenuList.value).filter(item => {
      return (
        useDataDashboardThemeStore.GET_SETTING("dataDashboardMenuId") == item.id
      );
    });
    activemenu.value = arr[0];
  } else {
    useDataDashboardThemeStore.CHANGE_SETTING({
      key: "dataDashboardMenuId",
      value: 7
    });
    let arr = cloneDeep(customMenuList.value).filter(item => {
      return 7 == item.id;
    });
    activemenu.value = arr[0];
  }
};
//获取单位大屏设置
const getunitysetmenu = () => {
  unitysetting().then(res => {
    useDataDashboardThemeStore.CHANGE_SETTING({
      key: "unityInfo",
      value: res.result
    });
    // 主题设置
    // useDataDashboardThemeStore.setDataDashboardThem(DATA_DASHBOARD_THEME_Map.custom1)
    useDataDashboardThemeStore.setDataDashboardThem(res.result?.screenTheme);
    if (res.result.screenMode == 1) {
      customMenuList.value = [];
      menuList.forEach(item => {
        customMenuList.value.push(MenuEnum[item]);
      });
      if (useDataDashboardThemeStore.GET_SETTING("dataDashboardMenuId")) {
        let arr = cloneDeep(customMenuList.value).filter(item => {
          return (
            useDataDashboardThemeStore.GET_SETTING("dataDashboardMenuId") ==
            item.id
          );
        });
        activemenu.value = arr[0];
      }
    } else if (
      res.result.screenMode == 2 &&
      res.result.screenMenus.length > 0
    ) {
      setmenu(res.result.screenMenus, 1);
    }
  });
};
//获取项目大屏设置
const getsetprojectmenu = () => {
  projectsetting().then(res => {
    if (res.code == 200) {
      useDataDashboardThemeStore.CHANGE_SETTING({
        key: "projectInfo",
        value: res.result
      });
      useDataDashboardThemeStore.CHANGE_SETTING({
        key: "dataDashboardButtonId",
        value: res.result.indexMode
      });
      if (res.result.menuMode == 1) {
        customMenuList.value = [];
        projectmenuList.forEach(item => {
          customMenuList.value.push(MenuEnum[item]);
        });
        systematic().then(res => {
          if (res.code == 200 && res.result.length > 0) {
            res.result.forEach((item, index) => {
              customMenuList.value.splice(2, 0, {
                id: index + 100,
                menuName: item.systematicName,
                componentleft: MenuEnum["application"].componentleft,
                componentright: MenuEnum["application"].componentright,
                menuTypemap: MenuEnum["application"].menuTypemap,
                systematicId: item.systematicId
              });
            });
          }
        });
        useDataDashboardThemeStore.CHANGE_SETTING({
          key: "dataDashboardMenuId",
          value: 7
        });
        if (useDataDashboardThemeStore.GET_SETTING("dataDashboardMenuId")) {
          let arr = cloneDeep(customMenuList.value).filter(item => {
            return 7 == item.id;
          });
          activemenu.value = arr[0];
        }
      } else if (
        res.result.menuMode == 2 &&
        res.result.screenMenus.length > 0
      ) {
        setmenu(res.result.screenMenus, 2);
      }
      if (usePageVariablesStore.getPlatform() == PLATFORM_Map.monitor) {
        customMenuList.value[0].menuName = "监管首页";
      }
    }
  });
};
const setshowright = () => {
  isshowrihgts.value = true;
};
const checkmenu = id => {
  useToggleAnimate().motion(leftRef.value, rightRef.value);
  useDataDashboardThemeStore.CHANGE_SETTING({
    key: "dataDashboardIsHidden",
    value: 1
  }); //隐藏建筑详情
  //当在项目大屏且点击项目主页时切换
  if (
    useDataDashboardThemeStore.GET_SETTING("dataDashboardType") == 2 &&
    id == 1
  ) {
    let screen = cloneDeep(usePageVariablesStore.getScreen());
    screen.project = null;
    usePageVariablesStore.setScreen(screen);
    if (usePageVariablesStore.getPlatform() == PLATFORM_Map.monitor) {
      initScreenUnit().finally(() => {
        usePageVariablesStore.setPlatform(6);
        window.location.reload();
      });
      useDataDashboardThemeStore.CHANGE_SETTING({
        key: "dataDashboardType",
        value: 3
      });
    } else {
      useDataDashboardThemeStore.CHANGE_SETTING({
        key: "dataDashboardType",
        value: 1
      });
    }
  }
  //存储激活菜单id
  useDataDashboardThemeStore.CHANGE_SETTING({
    key: "dataDashboardMenuId",
    value: id
  });
  //过滤出激活的菜单
  let arr = cloneDeep(customMenuList.value).filter(item => {
    return id == item.id;
  });
  activemenu.value = arr[0];
  //在单位大屏时向地图传递参数
  channel.value.postMessage({
    key: "dataDashboardMenuId",
    value: activemenu.value?.menuTypemap,
    type: "changemenuTypemap"
  });
  //判断是否是系统 是展示系统选择
  if (
    activemenu.value?.systematicId > 0 &&
    useDataDashboardThemeStore.GET_SETTING("dataDashboardType") == 1
  ) {
    useDataDashboardThemeStore.CHANGE_SETTING({ key: "systemShow", value: 1 });
  } else if (
    activemenu.value?.systematicId > 0 &&
    useDataDashboardThemeStore.GET_SETTING("dataDashboardType") == 2
  ) {
    useDataDashboardThemeStore.CHANGE_SETTING({
      key: "systemidparent",
      value: activemenu.value.systematicId
    });
    useDataDashboardThemeStore.CHANGE_SETTING({ key: "systemShow", value: 2 });
  } else {
    useDataDashboardThemeStore.CHANGE_SETTING({ key: "systemShow", value: 0 });
  }
};
function checkmenus() {
  changeleft();
  changeright();
  setTimeout(() => {
    changeleft();
    changeright();
  }, 1500);
}
watch(
  () => useDataDashboardThemeStore.GET_SETTING("dataDashboardType"),
  (newValue, oldValue) => {
    if (newValue == 1) {
      getunitysetmenu();
    } else if (newValue == 2) {
      getsetprojectmenu();
    } else if (newValue == 3) {
      getunitysetmenu();
      console.log("监管大屏接口请求");
    }
  },
  { immediate: true }
);
watch(
  () => useDataDashboardThemeStore.GET_SETTING("dataDashboardIsHidden"),
  (newValue, oldValue) => {
    if (newValue == 2) {
      useDataDashboardThemeStore.CHANGE_SETTING({
        key: "dataDashboardButtonIdsa",
        value: useDataDashboardThemeStore.dataDashboardButtonId
      });
    } else if (
      newValue == 1 &&
      useDataDashboardThemeStore.dataDashboardButtonIdsa !== null
    ) {
      useDataDashboardThemeStore.CHANGE_SETTING({
        key: "dataDashboardButtonId",
        value: useDataDashboardThemeStore.dataDashboardButtonIdsa
      });
    }
  },
  { immediate: true }
);
</script>

<style lang="scss" scoped>
@keyframes moveLeft {
  from {
    transform: translateX(-466px);
  }

  to {
    transform: translateX(0);
  }
}

@keyframes moveLefts {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-466px);
  }
}

.anmete {
  animation: moveLeft 1s;
  animation-fill-mode: forwards;
}

.anmetes {
  animation: moveLefts 1s;
  animation-fill-mode: forwards;
}

// 右边
@keyframes moveRight {
  from {
    right: -456px;
  }

  to {
    right: 10px;
  }
}

@keyframes moveRights {
  from {
    right: 10px;
  }

  to {
    right: -456px;
  }
}

.anmeter {
  animation: moveRight 1s;
  animation-fill-mode: forwards;
}

.anmeters {
  animation: moveRights 1s;
  animation-fill-mode: forwards;
}

/* 应用动画到元素 */
// .move-right {
//   animation: moveRight 0.7s;
// }
// .move-rights {
//   animation: moveRighta 0.7s;
// }
.bgImg {
  background: url("../../../../assets/screenimg/data3.png") no-repeat;
  background-size: 14px 100%;
}

// .bgImgs {
//   background: url("../../../../assets/screenimg/data6.png") no-repeat right;

// }

.bgImg-right {
  background: url("../../../../assets/screenimg/data5.png") no-repeat right;
  background-size: 14px 100%;
}

// .bgImg-rights {
//   background: url("../../../../assets/screenimg/data6.png") no-repeat left;
//   // background-size: 14px 100%;
// }
</style>
